<script setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
let User = reactive({
    username: "",
    password: ""
})
// 渲染数据 tableData
let tableData = reactive([])
let isShow = ref(false)
let UserId = ref("")
// 初始化渲染
onMounted(async () => {
    const data = await axios.get('http://127.0.0.1:3000/user')
    data.data.data.forEach(element => {
        tableData.push(element)
    });
})
// 新增跳转
function add() {
    isShow.value = true
    UserId.value = ""
    // 让user变为空对象
    User = reactive({})
}
// 保存 
async function save(id) {
    console.log(id);
    if (id) {
        let data = await axios.put(`http://127.0.0.1:3000/user/${id}`, User)
        // 根据id找到数组从而修改数据
        tableData.forEach(item=>{
            if(item.id === id){
                item.username = User.username,
                item.password = User.password
            }
        })
        isShow.value = false 
    } else {
        let data = await axios.post('http://127.0.0.1:3000/user', User)
        tableData.push(data.data)
        isShow.value = false
        UserId.value = ""
    }
}

// 修改 1 编辑
async function edit(id) {
    UserId.value = id
    let data = await axios.get(`http://127.0.0.1:3000/user/${id}`)
    console.log(data.data);
    User.username = data.data.username
    User.password = data.data.password
    isShow.value = true

}
// 删除
async function del(id) {
    let data = await axios.delete(`http://127.0.0.1:3000/user/${id}`)
    // idx 用来记录下标
    let idx = ''
    tableData.forEach((item, index) => {
        if (item.id === id) {
            idx = index
        }
    })
    // 利用下标删除数组里的内容
    tableData.splice(idx, 1)
}

let username = ref("")
// 查询
async function getUser(){
    let data = await axios.get(`http://127.0.0.1:3000/user/?name=${username.value}`)
    console.log(data.data.data);

    tableData = reactive([])
    data.data.data.forEach(element => {
        tableData.push(element)
    });
}
</script>

<template>
    <div>
        <el-button type="success" class="content-addButton"@click="add">新增</el-button>
         <el-input v-model="username" style="width: 240px" placeholder="Please input" />
         <el-button class="content-addButton" @click="getUser">查询</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="Date" width="380" />
    <el-table-column prop="username" label="用户名" width="380" />
    <el-table-column prop="password" label="密码" />
    <el-table-column label="操作">
        <template #default="scope">
            <el-button @click="del(scope.row.id)">删除</el-button>
            <el-button @click="edit(scope.row.id)">修改</el-button>
        </template>
    </el-table-column>
  </el-table>
    <div class="content-back" v-if="isShow">
        <div class="content-from">
            <tr>
                <td> 用户名:</td>
                <td><input type="text" v-model="User.username"></td>
            </tr>
            <tr>
                <td> 密码:</td>
                <td><input type="text" v-model="User.password"></td>
            </tr>
            <button @click="isShow = false">取消</button>
            <button @click="save(UserId)">保存</button>
        </div>
    </div>
</template>

<style scoped>
.content-back {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgb(0, 0, 0, .5);
}

.content-from {
    width: 300px;
    background-color: #ffffff;
}
.content-addButton{
    margin: 5px
}
</style>